import React, { useEffect, useState } from "react"; import { META } from "@consumet/extensions"; import Link from "next/link"; import Layout from "../../components/layout"; import Head from "next/head"; import { closestMatch } from "closest-match"; import Content from "../../components/hero/content"; import { useSession } from "next-auth/react"; export default function Himitsu({ info, slicedDesc, color, episodeList, episode1, judul, subIndo, epIndo, }) { const [isLoading, setIsloading] = useState(false); const [showText, setShowtext] = useState(false); const [load, setLoad] = useState(true); const [Lang, setLang] = useState(true); const [showAll, setShowAll] = useState(false); const { data: session } = useSession(); const [lastPlayed, setLastPlayed] = useState(null); const [user, setUser] = useState(null); const episode = episodeList; const epi1 = episode1; const maxItems = 3; function handleEnLang() { setLang(true); } function handleIdLang() { setLang(false); } useEffect(() => { async function userData() { setLoad(false); if (!session) return; setLoad(true); const res = await fetch(`/api/get-user?userName=${session?.user.name}`); const data = await res.json(); setLastPlayed( data?.recentWatch.filter( (item) => item.title.romaji === info.title.romaji )[0]?.episode ); setUser(data); setLoad(false); } function getBrightness(color) { const rgb = color.match(/\d+/g); return (299 * rgb[0] + 587 * rgb[1] + 114 * rgb[2]) / 1000; } // set the text color based on the background color function setTextColor(element) { const backgroundColor = getComputedStyle(element).backgroundColor; const brightness = getBrightness(backgroundColor); if (brightness < 128) { element.style.color = "#fff"; // white } else { element.style.color = "#000"; // black } } const elements = document.querySelectorAll(".dynamic-text"); elements.forEach((element) => { setTextColor(element); }); userData(); }, [color, session]); if (!info) { return; } let episodeIndo = null; if (epIndo < 17) { episodeIndo = episode.slice(0, epIndo); } else { episodeIndo = episode; } async function handleUpdate(data) { if (!session) return; const res = await fetch("/api/update-user", { method: "POST", body: JSON.stringify({ name: session?.user.name, newData: { recentWatch: data, }, }), headers: { "Content-Type": "application/json", }, }); console.log(res.status); } return ( <> {info.title?.english || info.title.romaji}
{isLoading ? (

Loading cuy sabar...

) : info ? (
{info.image && ( <>
)}
{/* MOBILE */}

{judul}

Rate:

{info.rating}%

Format:

{info.type}

Status:

{info.status}

{epi1 && epi1[0] ? ( handleUpdate({ title: { romaji: info.title.romaji || info.title.english || info.title.native, }, description: info.description, coverImage: { extraLarge: info.image, }, id: parseInt(info.id), }) } >

{" "} WATCH

) : (

{" "} WATCH

)}
{/* PC */}

{info.title?.english || info.title.romaji || info.title.native}

{episode && episode.length} Episodes
{info.releaseDate}
{info.rating}%
{info.type}
{info.status}
Sub | {subIndo === null ? "EN" : "EN/ID"}

Relations
{info.relations.length > maxItems && (
setShowAll(!showAll)} > {showAll ? "show less" : "show more"}
)}
{info.relations && info.relations .slice(0, showAll ? info.relations.length : maxItems) .map((relation, index) => { return (
{relation.id}
{relation.relationType}
{relation.title.romaji}
{relation.type}
); })}

Episodes

{load ? (

Loading...

) : episode && Lang ? ( episode.map((episode, index) => { const item = lastPlayed?.find( (item) => item.id === episode.id ); console.log(item); return (
handleUpdate({ title: { romaji: info.title.romaji || info.title.english || info.title.native, }, description: info.description, coverImage: { extraLarge: info.image, }, id: parseInt(info.id), }) } href={`/anime/watch/${episode.id}/${info.id}/${ item ? `${item.time}` : "" }`} className={`text-start text-xl ${ item ? "text-[#414141]" : "text-white" }`} >

Episode {episode.number}

{episode.title && (

"{episode.title}"

)}
); }) ) : subIndo === null ? (

No Episodes Available

) : ( <>
{episodeIndo.map((episode, index) => { return (
handleStore({ title: info.title?.english || info.title.romaji || info.title.native, description: info.description, image: info.image, id: info.id, }) } href={`/anime/watch?title=${encodeURIComponent( info.title?.romaji || info.title?.english )}&id=${subIndo}&idInt=${info.id}&epi=${ episode.number }&epiTitle=${encodeURIComponent( episode.title )}&te=${epIndo}&sub=id`} className="text-start text-xl" >

Episode {episode.number}

"{episode.title}" (Sub Indonesia)

); })}
)}
) : (

404

{`> Woops.. I think we don't have that Anime :(`}

Return to search
)}
); } export const getServerSideProps = async (context) => { context.res.setHeader( "Cache-Control", "public, s-maxage=10, stale-while-revalidate=59" ); const { id } = context.query; if (!id) { return { notFound: true, }; } const provider = new META.Anilist(); const [info, episodes] = await Promise.all([ fetch(`https://api.moopa.my.id/meta/anilist/info/${id[0]}`).then((res) => res.json() ), provider.fetchEpisodesListById(id[0]), ]); let episodeList = episodes; if (episodes.length === 0) { const res = await fetch( `https://api.moopa.my.id/anime/gogoanime/${ info.title.romaji || info.title.english }` ); const data = await res.json(); const match = closestMatch( info.title.romaji, data.results.map((item) => item.title) ); const anime = data.results.filter((item) => item.title === match); if (anime.length !== 0) { const infos = await fetch( `https://api.moopa.my.id/anime/gogoanime/info/${anime[0].id}` ).then((res) => res.json()); episodeList = infos.episodes; } } const ress = await fetch( `https://ani-api-eight.vercel.app/kuramanime/search?query=${ info.title.romaji || info.title?.english }` ); const yes = await ress.json(); // Clannad Fixer function convertToClannad(text) { const regex = /(? item.title.includes(fixedTitle)); let list = yes.list.map((item) => item.title); const match = closestMatch(fixedTitle, list); const anime = yes.list.filter((item) => item.title === match); slug = anime[0]?.slug; const inf = await fetch( `https://ani-api-eight.vercel.app/kuramanime/anime/${slug}` ); const dataInf = await inf.json(); epis = dataInf.episode; } const desc = info.description.slice(0, 150) + "..."; const color = { backgroundColor: `${info.color}` }; const epi1 = episodes.filter((epi) => epi.number === 1); const title = info.title?.userPreferred || "No Title"; const MAX = 20; const oriJ = info.title?.english || info.title.romaji || info.title.native; const judul = oriJ.length > MAX ? `${oriJ.substring(0, MAX)}...` : oriJ; return { props: { info: { ...info, title: { ...info.title, userPreferred: title, }, }, slicedDesc: desc, color, episodeList, episode1: epi1, judul, subIndo: slug, epIndo: epis, }, }; };